<template>
    <div class="body">
        <el-card>
            <div class="title">技术需求</div>
            <el-form :inline="true" :model="formData">
                <el-form-item label="公司名称:">
                    <el-input size="mini" v-model="formData.companyName" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="技术需求:">
                    <el-input size="mini" v-model="formData.technologyName" placeholder="请输入技术需求"></el-input>
                </el-form-item>
                <el-form-item label="审批状态:">
                    <el-select size="mini" v-model="formData.status" placeholder="请选择审批状态" clearable>
                        <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button size="mini" type="primary" @click="getCompanyTechnology">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 20px">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" align="center" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="companyName" align="center" label="公司名称" min-width="30%">
                </el-table-column>
                <el-table-column prop="technologyName" align="center" label="技术需求" min-width="30%">
                </el-table-column>
                <el-table-column prop="status" align="center" label="审批状态" min-width="15%">
                    <template slot-scope="scope">
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#26db6f' : scope.row.status == 3 ? '#ff0000' : '#333') }">{{
                                scope.row.status == 1 ? '待审批' : scope.row.status == 2 ? '审批通过' : '审批未通过' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="25%">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.status == 2" @click="approve(scope.row)" type="text"
                            size="small">审批通过</el-button>
                        <el-button :disabled="scope.row.status == 3" @click="reApprove(scope.row)" type="text"
                            size="small">审批拒绝</el-button>
                        <!-- <el-button type="text" size="small">编辑</el-button> -->
                        <el-button @click="deleteApp(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="currentPage.page" :page-sizes="[5, 10, 15, 20]"
                :page-size="currentPage.pageSize" layout="total,->, sizes, prev, pager, next, jumper"
                :total="currentPage.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getCompanyTechnology, approveCompanyTechnology, delCompanyTechnology } from "../../api/table";
export default {
    data() {
        return {
            formData: {
                status: "",
                companyName: "",
                technologyName: "",
            },
            options: [
                {
                    label: "待审批",
                    value: 1,
                },
                {
                    label: "审批通过",
                    value: 2,
                },
                {
                    label: "审批不通过",
                    value: 3,
                },
            ],
            currentPage: {
                page: 1,
                pageSize: 10,
                total: 0,
            },
            tableData: []
        };
    },
    mounted() {
        this.getCompanyTechnology()
    },
    methods: {
        async getCompanyTechnology() {
            const data = {
                companyName: this.formData.companyName,
                technologyName: this.formData.technologyName,
                status: this.formData.status,
                page: this.currentPage.page,
                pageSize: this.currentPage.pageSize,
            };
            const res = await getCompanyTechnology(data);
            if (res.status != 0) {
                this.$message.error(res.message);
                return
            }
            this.tableData = res.data.data
            this.currentPage.total = res.data.total
        },
        approve(row) {
            console.log(row);
            this.$confirm('确定审批通过?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const data = {
                    id: row.id,
                    status: 2
                }
                const res = await approveCompanyTechnology(data)
                if (res.status != 0) {
                    this.$message.error(res.message);
                    return
                }
                this.getCompanyTechnology()
                this.$message({
                    type: 'success',
                    message: '已审批!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审批'
                });
            });
        },
        reApprove(row) {
            this.$confirm('确定审批未通过?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const data = {
                    id: row.id,
                    status: 3
                }
                const res = await approveCompanyTechnology(data)
                if (res.status != 0) {
                    this.$message.error(res.message);
                    return
                }
                console.log(this.tableData);

                if (this.tableData.length == 1) {
                    console.log(this.currentPage.page);

                    this.currentPage.page = this.currentPage.page - 1
                }
                this.getCompanyTechnology()
                this.$message({
                    type: 'success',
                    message: '已审批!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审批'
                });
            });
        },
        deleteApp(row) {
            console.log(row);

            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const data = {
                    id: row.id,
                }
                const res = await delCompanyTechnology(data)
                if (res.status != 0) {
                    this.$message.error(res.message);
                    return
                }
                console.log(this.tableData);

                if (this.tableData.length == 1) {
                    console.log(this.currentPage.page);

                    this.currentPage.page = this.currentPage.page - 1
                }
                setTimeout(() => {
                    this.getCompanyTechnology()
                }, 500)
                // this.getCompanyTechnology()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage.pageSize = val
            this.getCompanyTechnology()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage.page = val
            this.getCompanyTechnology()
        },
    },
};
</script>

<style lang="scss" scoped>
.body {
    padding: 20px;
    // height: 100vh;
    background: #f5f7fa;

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 20px;
    }
}
</style>
